// 保存单个图表
import React, { useState } from 'react';
import { Form, Input, Modal, message } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
// getChildAnalysePageList
import { saveChartComponent } from 'src/services/AnalyseManage';
import AnalyseCategorySelect from 'src/pages/AnalyseManage/Components/AnalyseCategorySelect';

interface IProps {
	modalVisible: boolean;
	currentConfig: any;
	onCancel(): void;
}

const SaveModal = ( props: IProps ) => {
	const [ form ] = Form.useForm();
	const { modalVisible, onCancel, currentConfig } = props;
	// const [ chartList, setChartList ] = useState( [] );
	const [ currentData, setCurrentData ] = useState( { id: null, parentId: null } );

	const okHandle = async () => {
		form.validateFields()
			.then( async ( values: any ) => {
				const data = {
					componentId: currentConfig.key,
					content: JSON.stringify( currentConfig ) ,
					describe: values.des,
					name: values.chartName,
					parentId: values.parentId,
				};
				const res = await saveChartComponent( data );

				if ( res.data && res.data.success ) {
					message.success( '保存成功' );
					onCancel();
				}
				console.log( res );

			} )
			.catch( ( errorInfo ) => {
				// error
			} );

	};
	const handelCancel = () => {
		onCancel();
	};

	const selectFolder = async ( node: any ) => {
		form.setFieldsValue( { parentId: node.id, chartName: null } );
		setCurrentData( { ...form.getFieldsValue() } );
		// let response = await getChildAnalysePageList( {
		// 	categoryId: node.id,
		// 	name: '',
		// 	page: 1,
		// 	size: 9999
		// } );
		// if ( response.data && response.data.success ) {
		// 	let rows = response.data.data.rows;
		// 	setChartList( rows );
		// }
	};

	return (
		<Modal
			destroyOnClose
			title="另存为图形指标"
			visible={modalVisible}
			onCancel={handelCancel}
			onOk={okHandle}
			width={'60%'}
			okText="确定"
			cancelText="取消"
		>
			<Form preserve={false} layout="horizontal" form={form} initialValues={currentData}>
				<FormItem
					labelCol={{ span: 5 }}
					wrapperCol={{ span: 15 }}
					label="文件夹"
					name="parentId"
					rules={[ { required: true, message: '不能为空！' } ]}
				>
					<AnalyseCategorySelect
						onSelect={( node ) => {
							selectFolder( node );
						}}
						type='COMPONENT'
						defaultSelectedKeys={[]}
					></AnalyseCategorySelect>
				</FormItem>
				<FormItem
					labelCol={{ span: 5 }}
					wrapperCol={{ span: 15 }}
					label="图表名称"
					name="chartName"
					rules={[ { required: true, message: '不能为空！' } ]}
				>
					<Input placeholder='图表名称不能为空' />

					{/* <Select showSearch>
						{chartList.map( ( item,index ) => <Select.Option key={index} value={item.id}>{item.name}</Select.Option> )}
					</Select> */}
				</FormItem>
				<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="图表描述" name="des">
					<Input />
				</FormItem>
			</Form>
		</Modal>
	);
};

export default React.memo( SaveModal );
